<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
</head>

<body>

	<div style="margin: 200px;">
		<div id="zz"
			style="float: left;font-size: 26px;width: 40px;height: 50px;background: url(img/watch_numb.png) no-repeat;">
		</div>
		<div id="gg"
			style="float: left;font-size: 26px;width: 40px;height: 50px;background: url(img/watch_numb.png) no-repeat;">
		</div>
	</div>

	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		var index = 0

		var timer = setInterval(function () {

			if (zzindex === 6) {
				location.reload()
				clearInterval(timer)
				return;
			}

			index++
			if (index <= 9) {
				$("#gg").css({
					"background-position-y": (-index * 50)
				})
			} else {
				changezz()
				index = 0
				$("#gg").css({
					"background-position-y": 0
				})
			}

		}, 50)

		var zzindex = 0

		function changezz() {
			zzindex++
			$("#zz").css({
				"background-position-y": (-zzindex * 50)
			})
		}
	</script>

</body>

</html>